<template>
	<view>
		<!-- 头部 -->
		<view class="recording">
			<view class="WeChat_name">微信名</view>
			<view class="frequency"  @click="sortt()">点击次数</view>
			<image class="prompt" v-if="showimg" v-bind:class="{Ascending:Ascending}" src="../../static/bottom.png"/>
			<view class="stay" @click="long()">停留时长(s)</view>
			<image class="prompt_l" v-if="!showimg" v-bind:class="{Descending:Descending}" src="../../static/bottom.png"/>
			<view class="sales">销售顾问</view>
		</view>
		<!-- 客户列表 -->
		<view class="row" ref="a">
			<view class="list" v-for="(list,index) in info" :key="list.id">
				<view class="user_name">{{list.name}}</view>
				<view class="hit_count">{{list.count}}</view>
				<view class="remain">{{list.remain}}</view>
				<view class="sales_consultant">{{list.sales_consultant}}</view>
			</view>
		</view>
		<!-- 掌邦技术支持 -->
		<view :class="{AD:isAD,activeAD:isActiveAd}">
			<image class="zanboon" src="../../static/sellcoupon_and_propagation/zanboon.png"></image>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return{
				Ascending:true,
				Descending:true,
				Height:'',//手机高度
				row:'',//内容的高度
				isAD:true,
				isActiveAd:false,
				id:'',
				name:'',
				count:'',
				remain:'',
				showimg:true,
				info:[
					{
						id:1,
						name:'哎呀长名字好长好长…',
						count:'15',
						remain:'7',
						sales_consultant:'刘美丽',
					},
					{
						id:2,
						name:'哎呀短名字',
						count:'16',
						remain:'700',
						sales_consultant:'黄美丽',
					},
					{
						id:3,
						name:'哎',
						count:'17',
						remain:'70',
						sales_consultant:'里美丽',
					}
					
					
				],
			}
		},
		onLoad() {
			let that = this;
			that.sortt();
			uni.getSystemInfo({
				success: function(res) {
					that.Height=res.screenHeight;
				}
			});
		},
		onReady(){
			let that=this;
			// console.log(that.$refs.a);
			that.row=that.$refs.a.$el.clientHeight;
			that.quantity();
		},
		methods:{
			sortt:function(){//点击次数
				let that=this;
				that.showimg=true;
				if(that.Ascending==false){
					that.info.sort(function(a,b){
						return a.count-b.count
						});
					that.Ascending=true
				}else{
					that.info.sort(function(a,b){
						return b.count-a.count
						});
					that.Ascending=false;
				}
			},
			long:function(){//停留时长
				let that=this;
				that.showimg=false;
				if(that.Descending==false){
					that.info.sort(function(a,b){
						return a.remain-b.remain
						});
					that.Descending=true
				}else{
					that.info.sort(function(a,b){
						return b.remain-a.remain
						});
					that.Descending=false
				}
				
			},
			quantity:function(){
				let that=this;
				//let Height=that.Height-that.row;//手机高度减去内容高度
				let Height=that.Height-94;
				console.log(Height,'369');
				// let Row=that.row;
				if(Height>that.row){
					that.isAD=true;
					that.isActiveAd=false;
				}else if(Height<that.row){
					that.isAD=false;
					that.isActiveAd=true;
				}
			}
		}
		
	}
</script>

<style>
	page{
		background: #F3F2F7;
	}
		.recording{
			font-size: 28upx;
			color: #333333;
			display: flex;
			align-items: center;
			/* justify-content: space-around; */
			height: 108upx;
			background: #FFFFFF;
			margin-bottom: 4upx;
		}
			.WeChat_name{
				margin-left: 30upx;
				width: 172.5upx;
				/* border: 1upx solid #007AFF ; */
			}
			.frequency{
				display: flex;
				align-items: center;
				justify-content: center;
				width: 177.5upx;
				/* border: 1upx solid #4CD964; */
			}
				.prompt{
					position: absolute;
					left:350upx;
					height: 12upx;
					width: 20upx;
				}
				.prompt_l{
					position: absolute;
					right:190upx;
					height: 12upx;
					width: 20upx;
				}
				.Ascending,.Descending{
					transform: rotate(180deg);
				}
			.stay{
				display: flex;
				align-items: center;
				justify-content: center;
				width: 177.5upx;
				/* border: 1upx solid #007AFF; */
			}
			.sales{
				display: flex;
				align-items: center;
				justify-content: flex-end;
				width: 162.5upx;
				/* border: 1upx solid #007AFF; */
				margin-right: 30upx;
			}
			.list{
				display: flex;
				align-items: center;
				justify-content: space-between;
				color: #333333;
				background: #FFFFFF;
				margin-bottom: 10upx;
				padding: 20upx 0upx;
			}
				.user_name{
					width: 172.5upx;
					font-size: 30upx;
					margin-left: 30upx;
					/* border: 1upx solid #2C405A; */
				}
				.hit_count,.remain{
					display: flex;
					justify-content: center;
					text-align: center;
					width: 177.5upx;
					font-weight:700;
					font-size: 40upx;
					/* border: 1upx solid #007AFF; */
				}
				.sales_consultant{
					display: flex;
					justify-content: flex-end;
					padding-right: 10upx;
					text-align: center;
					width: 152.5upx;
					color: #666666;
					font-size: 30upx;
					/* border: 1upx solid #007AFF; */
					margin-right: 30upx ;
				}
		.AD{
				position: absolute;
				margin-bottom: 20upx;
				bottom: 0;
				left: 267upx;
				
			}
		.activeAD{
			position: relative;
			display: flex;
			justify-content: center;
			margin-top:34upx;
			margin-bottom: 20upx;
		}
				.zanboon{
					height: 28upx;
					width: 216upx;
					
				}
</style>
